<template>
  <div>


    <myheader></myheader>

	<section class="featured-block text-center">
		<div class="container">
			
			<div>

                <Breadcrumb :datas='datas'></Breadcrumb>

            </div>

            <div>

                <!-- <img :src="src" alt=""> -->
                <Avatar :src='src' :width='150' fit='fill'></Avatar>  

                <br>

					<Button color="red" @click="del">删除</Button>

					&emsp;&emsp;

					<input type="text" v-model="mkdir" /><Button color="blue" @click="create_mkdir">创建目录</Button>


            </div>

            <div>
                <table>

                    <tr>

                        <td>

                            用户头像

                        </td>

                        <td>

                            <input type="file" @change='upload'>
                            
                        </td>

                    </tr>

                    <tr>

                        <td>

                            又拍云

                        </td>

                        <td>

                            <input type="file" @change='upload_upyun'>
                            
                            <div class="upload">拖拽上传</div>
                        </td>

                    </tr>

                    <tr>

                        <td>

                            七牛云

                        </td>

                        <td>

                            <input type="file" @change='upload_qiniu'>
                            
                            {{load_percent}}
                            <br>

                            <!-- 进度条标签 -->
                            <Progress v-show="load_int" :percent='load_int' clor='green'>

                                <span slot="text"> {{load_int}}</span>

                            </Progress>
                            
                        </td>

                    </tr>


                    <tr>

                        <td>

                            七牛云视频：

                        </td>

                        <td>

                            <input type="file" @change='upload_qiniu'>
                            
                        </td>

                    </tr>


                    <tr v-show="videosrc">

                        <td>
                        </td>

                        <td>

                            <video id='video' width="300" height="200" :src="videosrc" controls autoplay></video>
                            <Button color='red' @click="into">{{mymsg}}</Button>
                        </td>

                    </tr>

                    <tr>

                        <td>

                            修改密码：

                        </td>

                        <td>

                            <input type="text" v-model='password' placeholder="请输入密码">
                            
                        </td>

                    </tr>



                    <tr>
                        <td></td>
                        <td> <Button color='blue' @click="submit">提交</Button> </td>

                    </tr>

                </table>
            </div>



		</div>
	</section>
	

	

	
    <myfooter></myfooter>    
		
		

    
  </div>
  
</template>


 
<script>

//导入组件
import myheader from './myheader'
import myfooter from './myfooter'

//导入文件
import {config,formatXml} from '../config.js'

export default {
  data () {
    return {
      msg: "这是一个变量",
      //整形进度
      load_int:0,
      //上传进度展示
      load_percent:'',
      //七牛云token
      token:'',
      //面包屑导航变量
      datas:[{title:'首页',route:{name:'index'}},{title:'我的首页'}],

      password:'',
      src:'',
      videosrc:'',

      mymsg:'进入画中画',

      //定义图片名称
      filename:'',
      //定义目录名称
      mkdir:'',



    }
  },
  //注册组件标签
  components:{
      'myheader':myheader,
      'myfooter':myfooter,
  },
  mounted:function(){
    
    //注册拖拽容器
    let upload = document.querySelector('.upload');
    //声明监听事件
    upload.addEventListener('dragenter', this.onDrag, false);
    upload.addEventListener('dragover', this.onDrag, false);
    upload.addEventListener('drop', this.onDrop, false);



    this.get_token();
    this.get_img();
  
},
  methods:{

	  onDrag (e) {
        e.stopPropagation();
        e.preventDefault();
      },
      onDrop (e) {
        e.stopPropagation();
        e.preventDefault();
        this.upload_upyun(e.dataTransfer.files);
      },

        //上传又拍云
        upload_upyun:function(files){


            //获取文件对象
            //let file = e.target.files[0];
            let file = files[0];

            //声明参数
            let param = new FormData();
            param.append('file',file);

            const config = {

            headers: { 'Content-Type': 'multipart/form-data' }

            } 

            this.axios.post('http://localhost:8000/uploadfileupyun/', param, config)// 上传图片

            .then(res=> {
                //图片名
                let filename = JSON.parse(res.data.filename).filename
                // console.log(JSON.parse(response.data.filename).filename)
                this.src = 'http://zl1907a.test.upcdn.net/static/upload/' + filename
                this.filename = filename

            });

        },

      //又拍云删除文件方法
      del(){
          this.axios.get('http://localhost:8000/del/',{params:{'filename':this.filename}}).then(res=>{
              if (res.data.code==200){
                  this.$Message('删除成功')
                  this.src = ''
              }else{
                  this.$Message('删除失败')
              }
              

          })
      },
      

      //又拍云创建文件夹
      create_mkdir(){
          this.axios.get('http://localhost:8000/mkdir/',{params:{'mkdir':this.mkdir}}).then(res=>{
              if (res.data.code==200){
                  this.$Message('创建成功')
                  
              }else{
                  this.$Message('创建失败')
              }
              

          })
      },


      //画中画
      into:function(){

      if (video !== document.pictureInPictureElement) {
      // 尝试进入画中画模式
      video.requestPictureInPicture();    
      this.mymsg = '退出画中画';  
      } else {
      // 退出画中画
      document.exitPictureInPicture();
      this.mymsg = '进入画中画';
      }

      },
      

      //获取用户头像
      get_img(){
          //请求后台接口
          this.axios.get('http://localhost:8000/userinfo/',{params:{'uid':localStorage.getItem('uid'),'jwt':localStorage.getItem('jwt')}}).then(res=>{
              this.src = 'http://localhost:8000/static/upload/' + res.data.user['img']
              if (res.data.code != 200){
                  this.$Message(res.data.mes)
              }
          })
      },
      
      //获取七牛云token
      get_token(){

          //请求后台接口
          this.axios.get('http://127.0.0.1:8000/qiniu/').then(res=>{
            console.log(res.data.token)
            this.token = res.data.token
             
          })
      },

      upload_qiniu(e){

          //获取文件
          let file = e.target.files[0];
          //声明表单参数
          let param = new FormData();
          
          param.append('file',file,file.name);
          param.append('token',this.token);

          //自定义axios
          const axios_qiniu = this.axios.create({withCredentials:false});

          //发送请求
          axios_qiniu({
              
              method:'POST',
              url:'http://up-z1.qiniup.com/',
              data:param,
              timeout:30000,
              //上传过程中的方法
  			  onUploadProgress:(e)=>{

  				//计算上传百分比
  				var complete = (e.loaded / e.total);

  				//处理美化
  				if(complete < 1){
  					this.load_percent = (complete * 100).toFixed(2) + '%';

  					this.load_int = parseInt((complete * 100).toFixed(2));
  				}

  			}
          }).then(res=>{
              
  			  //手动赋值100%
  			  this.load_percent = '100%';
  			  this.load_int = 100;
              console.log(res);
              this.src = config['baseurl']+res.data.key
              this.videosrc = config['baseurl']+res.data.key
          })

      },

      //请求后台接口
      upload(e){
          //获取文件
          let file = e.target.files[0];
          //声明表单参数
          let param = new FormData();

          param.append('file',file,file.name);
          param.append('uid',localStorage.getItem('uid'));

          //声明请求头
          let config = {headers:{'Content-Type':'multipart/form-data'}}

          //请求后台接口
          this.axios.post('http://localhost:8000/upload/',param,config).then(res=>{
              this.$Message(res.data.mes)
              console.log(res);
              this.src = 'http://127.0.0.1:8000/static/upload/'+res.data.filename

          })

      },


      //定义提交事件
      submit(){

          //非空验证
          if(this.password == ''){

              this.$Message('您没有输入密码')
              return false
          }


          //请求后台接口
          this.axios.get('http://localhost:8000/update',{params:{password:this.password,uid:localStorage.getItem('uid')}}).then(res=>{
              this.$Message(res.data.mes)
              console.log(res);


          })
      }
     
  }
}


</script>
 
<style>

td {
    padding: 10px;
}


.upload {
  margin: 100px auto;
  width: 300px;
  height: 150px;
  border: 2px dashed #f00;
}

</style>